<script setup>

import CardBox from "@/components/CardBox/index.vue";
import {Download} from "@element-plus/icons-vue";
import {getGraduatedListApi, getStuCityApi, getStudentListApi} from "@/api/school.js";

const {proxy} = getCurrentInstance();
const router = useRouter();
const state = reactive({
  total: 0,
  tableData: [],
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    stuPlace: '',
    stuClass: '',
    stuName: '',
    stuPhone: '',
  },
  queryParams2: {
    stuId: '',
  },
  studentList: [],
  cityList:[],
  chartOption:{}
});

const getDataList = async () => {
  const res = await getGraduatedListApi(state.queryParams)
  if (res.code == 200) {
    state.tableData = res.rows
    state.total = res.total
  }
}

const resetSearch = () => {
  proxy.resetForm("queryRef");
  state.queryParams = {
    pageNum: 1,
    pageSize: 10,
  }
  getDataList()
}

const searchStudent = async (query) => {
  const res = await getStudentListApi({stuName: query})
  if (res.code == 200) {
    state.studentList = res.data
  }
}
const getStudentList = async () => {
  const res = await getStudentListApi()
  if (res.code == 200) {
    state.studentList = res.data
  }
}

import geoJson from "./data/china.json"

const initChartData = () => {
  var geoCoordMap = {},
      data = [];

  geoJson.features.forEach(function (item, index) {
    var name = item.properties.name,
        cp = item.properties.center;
    if (cp) {
      geoCoordMap[name] = cp; // 地区经纬度

      const obj = state.cityList.find(item => item.cityName === name)
      data.push({
        name: name,
        value: cp.concat(obj?.count || 0)
      })
    }
  });

  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name];
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value),
        });
      }
    }
    return res;
  };


  const option = {
        visualMap: {
          show: false,
          min: 0,
          max: 100,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'], // 文本，默认为数值文本
          calculable: true,
          seriesIndex: [1],
          inRange: {
            color: ['#004693'] // 蓝绿
          }
        },
        geo: {
          show: true,
          map: 'china',
          roam: true,
          zoom: 1.25,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false,
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#031525',
              borderWidth: 1,
              borderColor: '#00CFFC',
            },
            emphasis: {
              areaColor: '#2B91B7',
            }
          }
        },
        series: [
          {
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: 5,
            label: {
              normal: {
                formatter: '{b}',
                position: 'bottom',
                show: true
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: 'red'
              }
            }
          },
          {
            type: 'map',
            map: 'china',
            geoIndex: 0,
            roam: true,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#3B5077'
              },
              emphasis: {
                areaColor: '#2B91B7'
              }
            },
            animation: false,
            data: data
          },
          {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin', //气泡
            symbolSize: function (val) {
              return 40
            },
            label: {
              show: true,
              formatter: function (parm) {
                return parm.value[4]
              },
              textStyle: {
                color: '#fff'
              }
            },
            itemStyle: {
              color: '#F62157' //标志颜色
            },
            zlevel: 6,
            data: convertData(data)
          },
        ]
      };

  state.chartOption = option
}

const getCityList = async () => {
  const res = await getStuCityApi()
  if(res.code === 200){
    state.cityList = res.data
    initChartData()
  }
}


const handleHonor = (row) => {
  router.push({
    path: '/baseData/comprehensiveIn/schoolHonor',
    query:{
      id: row.id
    }
  })
}

const handleJobHonor = (row) => {
  router.push({
    path: '/baseData/comprehensiveIn/jonHonor',
    query:{
      id: row.id
    }
  })
}


onMounted(() => {
  getStudentList()
  getDataList()
  getCityList()
})

</script>

<template>
  <div class="outBox">
    <div class="topBox">
      <el-card class="card1">
        <div class="header">
          <div class="tit">优秀毕业学生展示</div>
          <div class="select">
            <span>姓名</span>
            <el-select v-model="state.queryParams.stuId"
                       placeholder="请选择"
                       style="width: 200px;"
                       filterable
                       remote
                       reserve-keyword
                       clearable
                       :remote-method="searchStudent">
              <el-option v-for="item in state.studentList" :key="item.id"
                         :label="`${item.stuClass}-${item.stuName}`" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="items">
          <div class="item">
            <div class="img">
              <img src="@/assets/images/img1.png">
            </div>
            <div class="name">丁杨</div>
            <div class="tip">
              2024年“领航杯”江苏省大学生数字素养与技能大赛
            </div>
          </div>
          <div class="item">
            <div class="img">
              <img src="@/assets/images/img1.png">
            </div>
            <div class="name">丁杨</div>
            <div class="tip">
              2024年“领航杯”江苏省大学生数字素养与技能大赛
            </div>
          </div>
          <div class="item">
            <div class="img">
              <img src="@/assets/images/img1.png">
            </div>
            <div class="name">丁杨</div>
            <div class="tip">
              2024年“领航杯”江苏省大学生数字素养与技能大赛
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="card2">
        <MyEcharts :chart-data-options="state.chartOption" :is-map="true" :geo-json="geoJson" style="height: 500px"/>
      </el-card>
    </div>
    <CardBox title="荣誉展示" style="position: relative">
      <template #btn-cont>
        <el-button type="primary" @click="getDataList">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary">
          <el-icon>
            <Download/>
          </el-icon>
          <span>导出</span>
        </el-button>
      </template>
      <template #content>
        <div class="searchForm">
          <el-form :model="state.queryParams" label-width="auto" inline="true">
            <el-form-item label="姓名">
              <el-input v-model="state.queryParams.stuName"/>
            </el-form-item>
            <el-form-item label="院系">
              <el-input v-model="state.queryParams.stuFaculties"/>
            </el-form-item>
            <el-form-item label="班级">
              <el-input v-model="state.queryParams.stuClass"/>
            </el-form-item>
            <el-form-item label="户籍地">
              <el-input v-model="state.queryParams.stuPlace"/>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="state.queryParams.stuPhone"/>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="state.tableData" style="width: 100%">
          <el-table-column label="序号" type="index" width="50" align="center"/>
          <el-table-column prop="stuName" label="姓名" align="center"/>
          <el-table-column prop="stuNum" label="学号" align="center"/>
          <el-table-column prop="stuFaculties" label="院系" align="center"/>
          <el-table-column prop="stuClass" label="班级" align="center"/>
          <el-table-column prop="stuPhone" label="联系电话" align="center"/>
          <el-table-column prop="stuPlace" label="户籍地" align="center"/>
          <el-table-column prop="e" label="在校荣誉" align="center">
            <template #default="scope">
              <el-button type="primary" link @click="handleHonor(scope.row)">荣誉详情</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="f" label="任职后荣誉" align="center">
            <template #default="scope">
              <el-button type="primary" link @click="handleJobHonor(scope.row)">荣誉详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pageBox">
          <pagination
              v-show="state.total > 0"
              :total="state.total"
              v-model:page="state.queryParams.pageNum"
              v-model:limit="state.queryParams.pageSize"
              @pagination="getDataList"
          />
        </div>
      </template>
    </CardBox>
  </div>
</template>

<style scoped lang="scss">
.centerBtns {
  display: flex;
  justify-content: center;
  align-items: center;

  .btn {
    &:nth-child(1) {
      margin-right: 20px;
    }
  }
}

.formItems {
  .item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;

    :deep(.el-button+.el-button) {
      margin-left: 0px;
    }

    :deep(.el-button) {
      height: 35px !important;
    }

    .btns2 {
      .btn {
        width: 30%;
      }
    }

    .btns {
      flex: 1;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .btn {
        margin-bottom: 10px;

        &:nth-child(3) {
          margin: 0;
        }
      }
    }

    .name {
      width: 80px;
      white-space: nowrap;
    }
  }
}

.topBox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;

  .card2 {
    width: 38%;
  }

  .card1 {
    width: 60%;

    .items {
      margin-top: 20px;
      display: grid;
      gap: 40px;
      grid-template-columns: repeat(3, 1fr);

      .item {
        .name {
          text-align: center;
          margin: 10px 0px;
          font-weight: 500;
          font-size: 22px;
        }

        .tip {
          font-weight: 800;
          color: #000000;
          text-align: center;
        }

        .img {
          width: 100%;

          img {
            width: 100%;
          }
        }
      }
    }

    .header {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;

      .tit {
        font-weight: 800;
        font-size: 28px;
        color: #152584;
      }

      .select {
        display: flex;
        align-items: center;

        span {
          font-weight: 500;
          font-size: 14px;
          color: #484848;
          // 禁止换行
          white-space: nowrap;
          margin-right: 20px;
        }
      }
    }
  }
}

.searchForm {
  position: absolute;
  top: 15px;
  left: 120px;
}
</style>
